<html>
  <head>
    <title>
      Algoviz-Git 原理
    </title>
    <link href="/vendor/antd/antd.css" rel="stylesheet">
    </link>
  </head>
  <body>
    <article id="main" class="container">
    	<hr class="whitespace" style="height: 20vh;"/>
      <h1>
        Git 设计与原理
      </h1>
      <section id="intro">
      	<div class="grid">
      		<div class="grid-6">
		        <p>
		          <b>
		            git
		          </b>
		          （
		          <span class="nowrap">
		            <span class="IPA nopopups">
		              <a href="https://zh.wikipedia.org/wiki/Help:%E8%8B%B1%E8%AA%9E%E5%9C%8B%E9%9A%9B%E9%9F%B3%E6%A8%99" title="Help:英语国际音标">
		                /
		                <span style="border-bottom:1px dotted">
		                  <span title="“guy”的“g”音">
		                    ɡ
		                  </span>
		                  <span title="/ɪ/ “bid”的短“i”音">
		                    ɪ
		                  </span>
		                  <span title="“tie”的“t”音">
		                    t
		                  </span>
		                </span>
		                /
		              </a>
		            </span>
		          </span>
		          ，
		          <span class="unicode haudio" style="white-space:nowrap;">
		            <span class="fn">
		              <a href="https://zh.wikipedia.org/wiki/File:En-us-git.ogg" title="关于这个音频文件">
		                <img alt="关于这个音频文件" data-file-height="20" data-file-width="20" height="14" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/14px-Loudspeaker.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/21px-Loudspeaker.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/28px-Loudspeaker.svg.png 2x" width="14"/>
		              </a>
		              <a class="internal" href="//upload.wikimedia.org/wikipedia/commons/a/a2/En-us-git.ogg" title="En-us-git.ogg">
		                音频
		              </a>
		            </span>
		          </span>
		          ）是一个
		          <a href="https://zh.wikipedia.org/wiki/%E5%88%86%E6%95%A3%E5%BC%8F%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6" title="分布式版本控制">
		            分布式版本控制
		          </a>
		          软件，最初由
		          <a href="https://zh.wikipedia.org/wiki/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%89%98%E7%93%A6%E5%85%B9" title="林纳斯·托瓦兹">
		            林纳斯·托瓦兹
		          </a>
		          （Linus Torvalds）创作，于2005年以
		          <a class="mw-redirect" href="https://zh.wikipedia.org/wiki/GPL" title="GPL">
		            GPL
		          </a>
		          发布。最初目的是为更好地管理
		          <a href="https://zh.wikipedia.org/wiki/Linux%E5%86%85%E6%A0%B8" title="Linux内核">
		            Linux内核
		          </a>
		          开发而设计。其优雅的架构设计使得能够基于 git 管理任何类型的项目，具备高效，易学习，分布式协作等特性, 本文将介绍 git 工作方式及其内部设计原理。
							
							<blockquote>
								本文并非讲解如何使用 git，如果没有使用过 git 或者对 git 概览不熟悉，可参考：
								<ul>
									<li><a href="https://git-scm.com">https://git-scm.com</a></li>
								</ul>
							</blockquote>	
		        </p>
		        <!-- <div id="animated-arrow" class="hover-animation">
							<p>往下浏览</p>
							<svg width="40" height="10">
								<path d="M0,0L40,0L20,10Z" fill="#000" stroke="none"></path>
							</svg>
						</div> -->
      		</div>
      		<div class="grid-6 playground">
      			<div style="text-align: center;">
      				<svg id="IntroSVG"></svg>
      			</div>
      		</div>
      	</div>
      </section>


      <section id="GitTrees">
      	<hr class="whitespace" style="height: 30vh;"/>
      	<div class="grid">
      		<div class="grid-4">
      			<h2>三棵树</h2>
      			<p>
      				Git 的任何操作都是围绕三棵树展开：
      			</p>
    				<ul>
    					<li><b>工作目录树（Working Directory）：</b> 项目的源文件存放目录结构</li>
    					<li><b>索引树（index）：</b> 又叫暂存区(staging area)，在提交到 git 仓库前会暂时存放到暂存区域</li>
    					<li><b>对象树（Objects）：</b> git 仓库内部通过树的结构维护不同的分支以及文件，提交 commit </li>
    				</ul>
            <span id="GitTreesTrigger"></span>
          </div>
          <div class="grid-8">
            <div style="padding-left: 60px;padding-top:60px;">
              <svg id="SvgGitTree"></svg>
            </div>
          </div>
        </div>
      </section>

      <section id="GitTrees">
      	<hr class="whitespace" style="height: 50vh;"/>
      	<div class="grid">
      		<div class="grid-6">
      			<h2>.git 目录结构</h2>
      			<p>
      				 git 管理的仓库数据都存放在 <b>.git</b> 目录中
      			</p>
    				<ul>
							<li><b>configs:</b> 项目特有的配置选项</li>
    					<li><b>refs：</b> 存储{分支->对象 key}的引用</li>
    					<li><b>index：</b> 存储暂存区域信息  </li>
    					<li><b>objects：</b> 存储所有数据内容</li>
							<li><b>HEAD:</b> 指向当前分支的引用</li>
							<li><b>hooks:</b> hook 脚本，在git发生特定事件（eg：打 tag，提交 master）的时候将执行其中包含的脚本</li>
    				</ul>
      		</div>
      		<div class="grid-6"></div>
      		<hr class="whitespace" style="height: 30vh;"/>
      	</div>
      </section>
			
			<section id="GitTrees">
      	<hr class="whitespace" style="height: 50vh;"/>
      	<div class="grid">
      		<div class="grid-6">
      			<h2>对象详解</h2>
      			<p>
      				git 虽然是一套版本管理系统，但本质上是一个存储项目文件的数据库，所以也叫 <b>内容寻址文件系统 </b> ，其数据的存储方式是（key，value）组合，key 是根据 value 也即文件内容生成的唯一哈希值。
      			</p>

      			<p>
      				 可以通过底层命令 hash-object 来示范这点，传一些数据给该命令，它会将数据保存在 .git 目录并返回表示这些数据的键值。首先初使化一个 Git 仓库并确认 objects 目录是空的：
      			</p>
    				 
    				<p>
    					<pre><code>$ mkdir test
$ cd test
$ git init
Initialized empty Git repository in /tmp/test/.git/
$ find .git/objects
.git/objects
.git/objects/info
.git/objects/pack
$ find .git/objects -type f
$
    						</code>
    					</pre>
    				</p>
						
						<hr class="whitespace" style="height: 40vh;"/>

    				<p>
    					git 命令实际上就是在操作这些 objects，我们可以手动的去操作这些对象，实现：
    				</p>

    				<ul>
    					<li>第一步：创建一个 test.txt ,并放入文件系统中</li>
    					<li>第二步：修改 test.txt , 再次放到文件系统中</li>
    					<li>第三步：恢复第一个版本的 test.txt </li>
    				</ul>

						<hr class="whitespace" style="height: 50vh;"/>
    				<p>
    					tree 对象
    				</p>
      		</div>
      		<div class="grid-6"></div>
      		<hr class="whitespace" style="height: 30vh;"/>
      	</div>
      </section>

			


    </article>
    <script type="text/javascript" src="vendor/jquery.min.js"></script>
    <script type="text/javascript" src="vendor/snap.svg.js"></script>
		<script type="text/javascript" src="vendor/greensock/TweenMax.min.js"></script>
		<script type="text/javascript" src="vendor/scrollmagic/ScrollMagic.js"></script>
		<script type="text/javascript" src="vendor/scrollmagic/plugins/animation.gsap.js"></script>
		<script type="text/javascript" src="vendor/scrollmagic/plugins/debug.addIndicators.js"></script>
  </body>
</html>